<!--
 * @Author: your name
 * @Date: 2022-04-19 10:23:31
 * @LastEditTime: 2022-04-22 10:16:26
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceabilitythree\components\diseases.vue
-->
<!--
 * @Author: your name
 * @Date: 2022-03-02 13:34:55
 * @LastEditTime: 2022-04-15 14:21:18
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceability\components\growing-data.vue
-->
<template>
  <el-card v-if="!rowblankStatus" id="growing" class="box-card">
    <div slot="header" class="clearfix">
      <span>虫害数据 PEST DATA</span>
    </div>
    <!-- 病虫害溯源 -->
    <el-row>
      <!-- <div class="base-zh-title">病虫害统计</div> -->
      <div class="base-zh-box">
        <div class="zh-box-suyuan">
          <!-- <zhrowblank /> -->
          <zhrowblank :rowtitle="'发生虫害总次数'" :rowblank-list="rowblankList" @allpre="allpre" />
        </div>
      </div>
    </el-row>
    <!-- 通用弹出框 -->
    <el-dialog title="虫害发生详情" :visible.sync="dialogFormVisible">
      <el-table
        ref="tableData"
        v-loading="loading"
        highlight-current-row
        :data="insectlist"
        stripe
        border
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="insectName" label="虫害名称" />
        <el-table-column prop="collectionTime" label="发生日期" :formatter="dateFormat" />
      </el-table>
      <!-- </div> -->
    </el-dialog>
  </el-card>
</template>

<script>
import graApi from "@/api/trace-source-web/production-api/index-primary.js"
import zhrowblank from "./zh-row-blank/zh-row-blank.vue";
export default {
  components: { zhrowblank },
  props: {
    batId: {
      type: [Number, String],
      default: () => ""
    },
    startTime: {
      type: [Number, String],
      default: () => ""
    },
    endTime: {
      type: [Number, String],
      default: () => ""
    }
  },
  data() {
    return {
      loading: false,
      everchartdatalist: {},
      dialogFormVisible: false,
      rowblankList: [],
      insectlist: [],
      rowblankStatus: true
    };
  },
  watch: {
    startTime: {
      handler(val) {
        this.feignData()
      }
    }
  },
  // mounted() {
  //   this.feignData()
  // },
  methods: {
    // 转换时间格式
    dateFormat(row, colnum) {
      if (row.collectionTime) return this.$moment(row[colnum.property]).format("YYYY-MM-DD HH:mm:ss");
    },
    feignData() {
      let params = {
        batchNo: this.batId,
        startTime: this.startTime,
        endTime: this.endTime
      }
      graApi.queryDataByBatchFrom(params).then(res => {
        let list = res.data || []
        // console.log(list)

        if (list.length > 0) {
          this.rowblankStatus = false
        } else {
          this.rowblankStatus = true
        }
        this.rowblankList = []
        if (list) {
          list.forEach((itemone, index) => {
            if (itemone) {
              let pushobj = {
                name: itemone.insectName,
                value: itemone.insectNum, // 必须为数字
                unit: "只",
                allnum: 50, // 总数
                prence: "",
                color: ""
              };
              this.rowblankList.push(pushobj);
            }
          });
        }
      })
    },
    allpre(e) {
      // console.log(e)
      let params = {
        batchNo: this.batId,
        startTime: this.startTime,
        endTime: this.endTime,
        insectName: e
      }
      this.loading = true
      this.dialogFormVisible = true
      if (e) {
        graApi.queryDataByInsectName(params).then(res => {
          if (res.code === 1) {
            let list = res.data;
            this.insectlist = list
            // console.log(this.insectlist)
            this.loading = false
          }
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#growing {
  margin-bottom: 40px;
  max-width: 1270px;
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  ::v-deep .el-card__body {
    padding: 0 10px;
    .el-row {
      padding: 0px;
      position: relative;
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px dashed rgba(166, 166, 166, 1);
      .base-zh-box {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-bottom: 10px;
        min-height: 100px;
        // max-height: 400px;
        box-sizing: border-box;
        // padding-top: 50px;
        background-color: rgba($color: #0e4352, $alpha: 1);
        overflow-y: auto;
        .zh-box-line {
          width: calc(100% - 40px);
          margin-left: 20px;
          padding-bottom: 85px;
          // height: 40px;

          // background-color: rgba(22, 101, 124, 1);
          line-height: 40px;
          color: #fff;
          display: flex;
          justify-content: flex-start;
          flex-direction: row;
          position: relative;
          .box-line-one {
            margin-right: 20px;
          }
          .box-line-icon {
            width: 72px;
            height: 72px;
            background-color: rgba(113, 205, 230, 1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 3%;
            img {
              width: 40%;
              height: 40%;
              border: none;
              border-radius: 0;
            }
          }
          .box-line-dotted {
            position: absolute;
            height: 95%;
            border-left: 2px dashed rgba(113, 205, 230, 1);
            top: 45%;
            left: calc(3% + 36px);
          }
          .box-line-two {
            width: 25%;
            font-size: 30px;
            margin-left: 15px;
            margin-top: 15px;
            color: rgba(113, 205, 230, 1);
          }
          .box-line-main {
            position: absolute;
            right: 5%;
            width: 60%;
            border: 1px solid rgba(229, 229, 229, 0.5);
            border-radius: 5px;
            box-sizing: border-box;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            height: 120px;
            .line-name {
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 22px;
              span {
                display: inline-block;
                width: 60%;
                height: 40px;
                border: 1px solid rgba(229, 229, 229, 0.5);
                box-sizing: border-box;
                padding: 0 10px;
                margin-left: 15px;
                border-radius: 5px;
              }
            }
          }
        }
        .zh-box-circle {
          width: calc(100% - 40px);
          padding: 20px 20px;
          min-height: 250px;
          background-color: rgba($color: #0e4352, $alpha: 1);
          overflow-x: auto;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          flex-wrap: wrap;
          flex-direction: row;
          .box-circle-item {
            margin: 0 30px 30px;
            position: relative;
            .circle-item-line {
              position: absolute;
              left: 50%;
              top: 40%;
              transform: translate(-50%, -40%);
              word-wrap: break-word;
              height: 30px;
              line-height: 20px;
              font-size: 22px;
              text-align: center;
            }
            .circle-item-lineone {
              position: absolute;
              // position: relative;
              left: 50%;
              // top: 30%;
              transform: translate(-50%, 12%);
              // bottom: -3px;
              // word-wrap: break-word;
              white-space: nowrap;
              width: 100%;
              overflow: hidden;

              height: 30px;
              text-overflow: ellipsis;
              line-height: 20px;
              text-align: center;
            }
            .circle-item-linetwo {
              position: absolute;
              left: 50%;
              top: 60%;
              transform: translate(-50%, -60%);
              bottom: 100px;
              text-align: center;
              width: 100%;
              height: 30px;
              line-height: 30px;
            }
          }
        }
        .zh-box-table {
          // height: 300px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px 0;
          position: relative;
        }
        .agri {
          display: block;
          .agri-page {
            position: relative;
            // width: 100%;
            height: 40px;
            .pagination {
              position: absolute;
              right: 0px;
              bottom: 2px !important;
              .el-pager,
              .el-pager li {
                display: inline-block !important;
              }
            }
          }
        }
        .zh-box-suyuan {
          widows: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
          margin-top: 20px;
          flex-direction: column;
        }
      }
      p {
        margin-left: 20px;
      }
    }
    .el-row:first-child {
      border: none;
    }
  }
}
::v-deep .el-progress__text {
  white-space: pre;
}
</style>
